<template>
  <div class="courseTitle">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>毕业设计</el-breadcrumb-item>
      <el-breadcrumb-item>上传毕业设计课题</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form ref="courseTitleForm" :model="courseTitleForm" label-width="80px" class="content fixed-form" :rules="rules">
      <el-form-item label="专业" prop="majorID">
        <el-select v-model="courseTitleForm.majorID" placeholder="请选择专业" class="max-width" style="width:100%;">
          <el-option v-for="item in majorData" :label="item.majorName" :value="item.majorID"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学年" prop="academicYear">
        <el-date-picker
          v-model="courseTitleForm.academicYear"
          @change="changeAcademicYear"
          type="year"
          class="max-width"
          placeholder="请选择学年"
          style="width:100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="学期" prop="term">
        <el-select v-model="courseTitleForm.term" placeholder="请选择学期" class="max-width" style="width:100%;">
          <el-option label="01" value="01"></el-option>
          <el-option label="02" value="02"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课题名称" prop="graduateTitle">
        <el-input v-model="courseTitleForm.graduateTitle"></el-input>
      </el-form-item>
      <el-form-item label="课题来源" prop="titleSource">
        <el-input v-model="courseTitleForm.titleSource"></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="courseTitleForm.itemCategoryName"></el-input>
      </el-form-item>
      <el-form-item label="项目编号">
        <el-input v-model="courseTitleForm.itemCategoryID"></el-input>
      </el-form-item>
      <el-form-item label="要求人数" prop="num">
        <el-input v-model="courseTitleForm.num"></el-input>
      </el-form-item>
      <el-form-item label="课题附件">
        <el-upload
          ref="upload"
          :action="this.$until.url+'/graduateProgram/uploadTitleAttachment'"
          :auto-upload="false"
          :on-success="show"
          name="titleAttachmentName">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="课题简介">
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="courseTitleForm.titleIntroduce">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('courseTitleForm')">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default{
    name: 'courseTitle',
    data(){
      return {
        courseTitleForm: {
          graduateProPlanID: '',
          teacherID: '01',
          majorID: '',
          term: '',
          academicYear: '',
          graduateTitle: '',
          titleSource: '',
          itemCategoryName: '',
          itemCategoryID: '',
          num: '',
          titleIntroduce: '',
          titleAttachmentName: '',
          titleAttachment: ''
        },

        rules: {
          majorID: [
            {required: true, message: '请先选择专业', trigger: 'blur'}
          ],
          academicYear: [
            {required: true, message: '请先选择学年', trigger: 'blur'}
          ],
          term: [
            {required: true, message: '请先选择学期', trigger: 'blur'}
          ],
          graduateTitle: [
            {required: true, message: '请先输入课题名称', trigger: 'blur'}
          ],
          titleSource: [
            {required: true, message: '请先输入课题来源', trigger: 'blur'}
          ],
          num: [
            {required: true, message: '请先输入要求人数', trigger: 'blur'}
          ]
        },

        initUrl: this.$until.url + '/courseDesign/getMajorDesign',
        reUpdateUrl:this.$until.url + '/graduateProgram/addGraduateProgram',
        majorData: [],
      }
    },
    mounted(){
      this.getMajorData();
      this.getPlanTime();
    },
    methods: {

    	onSubmit(formName){
			this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addGraudateProgram();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
			},

      addGraudateProgram(){
        this.courseTitleForm.graduateProPlanID = this.$route.query.graduateProPlanID;
        this.$http.post(this.reUpdateUrl, this.courseTitleForm, {emulateJSON: true})
          .then((res) => {
            this.msg = res.body.message;
            this.$notify({
              title: '成功',
              message: this.msg,
              type: 'success'
            });
            console.log(res);
          }, (err) => {
            console.log(err);
          })
      },
      show: function (response, file, filelists) {
        for (var key in response) {
          this.courseTitleForm[key] = response[key];
        }
      },
      getMajorData: function () {
        this.$http.post(this.initUrl)
          .then((res) => {
            this.majorData = Array.from(res.body);
          }, (err) => {
            console.log(err)
          })
      },
      changeAcademicYear: function (val) {
        this.courseTitleForm.academicYear = val;
      },
      submitUpload(){
        this.$refs.upload.submit();
      },
      getPlanTime(){
      	this.$http.get(`${this.$until.url}/graduateProgram/getPlanTimeWithID`, {
				params: {
              graduateProPlanID:this.$route.query.graduateProPlanID
            },emulateJSON: true
			}).then((res) => {
				// 响应成功回调
				//console.log(res)
				for(var key in res.body) {
					this.courseTitleForm[key] = res.body[key]
				}
			}, (err) => {
				// 响应错误回调
				console.log("服务器异常！");
			})
      },
    }
  }
</script>
<style>

</style>
